<template>
  <div class='haikang' v-show="vedioList">
     <div><span class="vedioButton" :class="channelNumber==item.channelNumber?'active':''" v-for="(item,index) in vedioList" :key="index" @click="toggleVedio(item)">{{item.channelName}}</span></div>
     <Haikang  :vedioList="vedioList1" :iRet="iRet"/>
  </div>
</template>

<script>
import { listSite } from "@/api/map/station";
import { getToken } from "@/utils/auth";
import Haikang from '@/components/haikang/haikang'
  export default {
    name: "Station",
    data() {
      return {
        vedioList: {},
        vedioList1:{},
        channelNumber:1,
        iRet:0,
      };
    },
    components:{Haikang},
    created() {
         console.log('刷新')
       this.getList();

    },
        destroyed(){
         var oWndInfo = WebVideoCtrl.I_GetWindowStatus()

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_Stop();
        if (0 == iRet) {
          console.log("停止预览成功")
        } else {
          console.log("停止预览失败！")
        }
      }

        this.dialogVisible = false
        WebVideoCtrl.I_Logout(this.vedioList1.ip)
    },
    methods: {
      /** 查询场站信息列表 */
      getList() {
        listSite({stationName:"342滨湖治超站"}).then(response => {
          this.vedioList = response.rows[0].siteCameraList;
          this.vedioList1=this.vedioList[0]
          this.channelNumber=this.vedioList1.channelNumber
        });
      },
      toggleVedio(item){
        this.iRet=1
        this.vedioList1=item
        this.channelNumber=item.channelNumber
      }
    }
  };
</script>
<style lang="scss" scoped>

  .haikang{
    width:70%;
    height:700px;
    margin:0 auto;
    margin-top:50px;
  }
  .vedioButton{
    cursor: pointer;
  display:inline-block;
  background:skyblue;
  color:#fff;
  padding:5px 15px;
}
.active{
  background:burlywood;
}
</style>
